<template>
  <div class="meeting-assistant">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <div class="header-content">
          <h1>本地会议助手</h1>
          <div class="header-right">
            <span class="welcome-text">欢迎，{{ userInfo?.username || '未知用户' }}</span>
            <el-button type="text" @click="handleLogout">登出</el-button>
            <el-button type="primary" @click="createNewMeeting">新建会议</el-button>
          </div>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main>
        <el-tabs v-model="activeTab" type="border-card">
          <!-- 会议列表标签页 -->
          <el-tab-pane label="会议列表" name="meetingList">
            <el-input
              placeholder="搜索会议..."
              prefix-icon="el-icon-search"
              v-model="searchQuery"
              class="search-input"
            ></el-input>

            <el-table :data="meetings" style="width: 100%">
              <el-table-column prop="id" label="会议ID" width="80"></el-table-column>
              <el-table-column prop="title" label="会议标题"></el-table-column>
              <el-table-column prop="date" label="会议日期" width="180"></el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template v-slot:default="scope">
                  <el-tag :type="scope.row.status === '进行中' ? 'success' : 'info'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template v-slot:default="scope">
                  <el-button
                    size="small"
                    @click="viewMeetingDetail(scope.row.id)"
                  >
                    查看
                  </el-button>
                  <el-button
                    size="small"
                    type="primary"
                    @click="startMeeting(scope.row.id)"
                    v-if="scope.row.status === '未开始'"
                  >
                    开始
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 正在进行的会议标签页 -->
          <el-tab-pane label="进行中会议" name="ongoingMeeting">
            <div v-if="currentMeeting" class="ongoing-meeting">
              <h2>{{ currentMeeting.title }}</h2>
              <p class="meeting-time">开始时间: {{ currentMeeting.startTime }}</p>

              <div class="meeting-controls">
                <el-button type="primary" @click="startRecording">开始录音</el-button>
                <el-button type="danger" @click="stopRecording" v-if="isRecording">停止录音</el-button>
                <el-button @click="uploadAudio">上传音频</el-button>
              </div>

              <div class="recording-status" v-if="isRecording">
                <el-icon class="recording-icon"><microphone /></el-icon>
                <span>正在录音...</span>
              </div>

              <el-divider>会议实时转写</el-divider>
              <div class="transcription">
                <p v-for="(item, index) in transcription" :key="index">
                  <span class="speaker">{{ item.speaker }}:</span> {{ item.content }}
                </p>
              </div>
            </div>
            <div v-else class="no-meeting">
              <el-empty description="当前没有进行中的会议"></el-empty>
              <el-button type="primary" style="margin-top: 20px" @click="createNewMeeting">新建会议</el-button>
            </div>
          </el-tab-pane>

          <!-- 会议记录标签页 -->
          <el-tab-pane label="会议记录" name="meetingRecords">
            <el-table :data="meetingRecords" style="width: 100%">
              <el-table-column prop="id" label="记录ID" width="80"></el-table-column>
              <el-table-column prop="meetingTitle" label="会议标题"></el-table-column>
              <el-table-column prop="date" label="会议日期" width="180"></el-table-column>
              <el-table-column prop="summary" label="会议总结" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="操作" width="150">
                <template v-slot:default="scope">
                  <el-button size="small" @click="viewRecordDetail(scope.row.id)">查看详情</el-button>
                  <el-button size="small" type="success" @click="generateSummary(scope.row.id)">生成总结</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <!-- 新建会议对话框 -->
    <el-dialog title="新建会议" :visible.sync="dialogVisible" width="500px">
      <el-form ref="meetingForm" :model="meetingForm" label-width="80px">
        <el-form-item label="会议标题" prop="title">
          <el-input v-model="meetingForm.title"></el-input>
        </el-form-item>
        <el-form-item label="会议日期" prop="date">
          <el-date-picker v-model="meetingForm.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="会议参与者">
          <el-select v-model="meetingForm.participants" multiple placeholder="选择参与者">
            <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会议备注">
          <el-input v-model="meetingForm.notes" type="textarea" placeholder="请输入会议备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMeeting">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Microphone, User } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 响应式数据
const activeTab = ref('meetingList');
const searchQuery = ref('');
const meetings = ref([
  { id: 1, title: '产品需求会议', date: '2023-08-17', status: '未开始' },
  { id: 2, title: '技术架构讨论', date: '2023-08-16', status: '已结束' },
  { id: 3, title: '周例会', date: '2023-08-15', status: '已结束' },
]);
const currentMeeting = ref(null);
const isRecording = ref(false);
const transcription = ref([]);
const meetingRecords = ref([
  { id: 1, meetingTitle: '技术架构讨论', date: '2023-08-16', summary: '讨论了新项目的技术架构选型，决定使用Vue3和FastAPI。' },
  { id: 2, meetingTitle: '周例会', date: '2023-08-15', summary: '回顾了上周工作进展，安排了本周工作任务。' },
]);
const dialogVisible = ref(false);
const meetingForm = reactive({
  title: '',
  date: '',
  participants: [],
  notes: '',
});
const users = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
]);
const meetingFormRef = ref(null);

// 获取当前用户信息
const userInfo = computed(() => {
  try {
    const storedUserInfo = localStorage.getItem('userInfo');
    return storedUserInfo ? JSON.parse(storedUserInfo) : null;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    return null;
  }
});

// 生命周期钩子
onMounted(() => {
  // 初始化数据 - 可以从API加载实际数据
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  const user = userInfo.value;
  if (!user) {
    router.push('/login');
  }
};

// 方法
const createNewMeeting = () => {
  // 重置表单
  Object.keys(meetingForm).forEach(key => {
    if (key === 'participants') {
      meetingForm[key] = [];
    } else {
      meetingForm[key] = '';
    }
  });
  dialogVisible.value = true;
};

// 处理登出
const handleLogout = () => {
  // 清除localStorage中的用户信息
  localStorage.removeItem('userInfo');
  localStorage.removeItem('rememberedUser');
  
  // 显示成功消息
  ElMessage.success('登出成功');
  
  // 跳转到登录页
  router.push('/login');
};

const saveMeeting = () => {
  // 简单验证
  if (!meetingForm.title) {
    ElMessage.error('请输入会议标题');
    return;
  }
  if (!meetingForm.date) {
    ElMessage.error('请选择会议日期');
    return;
  }

  // 模拟保存会议
  const newMeeting = {
    id: meetings.value.length + 1,
    title: meetingForm.title,
    date: meetingForm.date,
    status: '未开始',
  };
  meetings.value.push(newMeeting);
  dialogVisible.value = false;
  ElMessage.success('会议创建成功');
};

const viewMeetingDetail = (id) => {
  // 模拟查看会议详情
  ElMessage.info(`查看会议ID: ${id} 的详情`);
};

const startMeeting = (id) => {
  // 模拟开始会议
  const meeting = meetings.value.find(item => item.id === id);
  if (meeting) {
    meeting.status = '进行中';
    currentMeeting.value = {
      id: meeting.id,
      title: meeting.title,
      startTime: new Date().toLocaleString(),
    };
    activeTab.value = 'ongoingMeeting';
    ElMessage.success('会议已开始');
  }
};

const startRecording = () => {
  // 模拟开始录音
  isRecording.value = true;
  ElMessage.success('录音已开始');
};

const stopRecording = () => {
  // 模拟停止录音
  isRecording.value = false;
  // 模拟添加一段转写内容
  transcription.value.push({
    speaker: '系统',
    content: '录音已停止，开始处理转写...',
  });
  ElMessage.success('录音已停止');
};

const uploadAudio = () => {
  // 模拟上传音频
  ElMessage.info('开始上传音频文件...');
  setTimeout(() => {
    ElMessage.success('音频上传成功');
  }, 1000);
};

const viewRecordDetail = (id) => {
  // 模拟查看记录详情
  ElMessage.info(`查看记录ID: ${id} 的详情`);
};

const generateSummary = (id) => {
  // 模拟生成总结
  ElMessage.info('开始生成会议总结...');
  setTimeout(() => {
    ElMessage.success('会议总结生成成功');
  }, 1000);
};
</script>

<style scoped>
.meeting-assistant {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-text {
  color: #606266;
  font-size: 14px;
}

.el-main {
  padding: 20px;
  overflow: auto;
  flex: 1;
}

.search-input {
  margin-bottom: 20px;
  width: 300px;
}

.ongoing-meeting {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

.meeting-time {
  color: #606266;
  margin-bottom: 20px;
}

.meeting-controls {
  margin-bottom: 20px;
}

.meeting-controls .el-button {
  margin-right: 10px;
}

.recording-status {
  display: flex;
  align-items: center;
  color: #f56c6c;
  margin-bottom: 20px;
}

.recording-icon {
  margin-right: 10px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.transcription {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.speaker {
  font-weight: bold;
  margin-right: 10px;
  color: #409eff;
}

.no-meeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}
</style>